<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>北京科技报</title>
		<link href="css/common.css" rel="stylesheet">
		<link href="css/header.css" rel="stylesheet">
		<link href="css/bookstarp.css" rel="stylesheet">
	</head>
	<body>
		<div id='vue_det' class="header-box">
			<div class="header flex align-end">
				<div class="flex-one">
					<img class="header-logo" src="images/logoff.png" />
					<div class="font-12 color-ff">聚焦科学传播 弘扬科学精神</div>
				</div>
				<div class="header-search-btn">
					<img class="header-search" src="images/search.png" />
				</div>
			</div>
			<div class="padding-lr-12 bg-ff" style="height: 43px;line-height: 43px;">
				<span class="font-12">当前位置：</span>
				<span class="font-12">首页</span>
				<span class="font-12">＞</span>
				<span class="font-12 color-main">热点解读</span>
			</div>
			<div class="flex align-center bg-ff padding-lr-12">
				<div class="header-xian flex-one"></div>
				<div class="header-radius"></div>
			</div>
			<div class="position-relative">
				<div class="header-status-box">
					<div class="header-status">
						<div class="color-main">首页</div>
						<div class="header-line"></div>
					</div>
					<div class="header-status" v-on:click.stop="status_type = 2">
						<a class="flex align-center">
							<div>要闻</div>
							<img class="header-status-im" v-bind:class="{'header-status-ac':status_type == 2}"
								src="images/down.png" />
						</a>
					</div>
					<div class="header-status" v-on:click.stop="status_type = 3">
						<a class="flex align-center">
							<div>解读</div>
							<img class="header-status-im" v-bind:class="{'header-status-ac':status_type == 3}"
								src="images/down.png" />
						</a>
					</div>
					<div class="header-status" v-on:click.stop="status_type = 4">
						<a class="flex align-center">
							<div>科创</div>
							<img class="header-status-im" v-bind:class="{'header-status-ac':status_type == 4}"
								src="images/down.png" />
						</a>
					</div>
					<div class="header-status" v-on:click.stop="status_type = 5">
						<a class="flex align-center">
							<div>科普</div>
							<img class="header-status-im" v-bind:class="{'header-status-ac':status_type == 5}"
								src="images/down.png" />
						</a>
					</div>
					<div class="header-status" v-on:click.stop="status_type = 6">
						<a class="flex align-center">
							<div>科教</div>
							<img class="header-status-im" v-bind:class="{'header-status-ac':status_type == 6}"
								src="images/down.png" />
						</a>
					</div>
					<div class="header-status">
						<div><a href="">专题</a></div>
					</div>
				</div>
		
				<!-- 下拉内容 -->
				<div class="header-content-box" v-if="status_type!=1">
					<div class="container">
						<div class="row">
							<div class="col-xs-4 col-sm-3">
								<div class="header-content"><a href="">科研成果</a></div>
							</div>
							<div class="col-xs-4 col-sm-3">
								<div class="header-content"><a href="">科研成果</a></div>
							</div>
							<div class="col-xs-4 col-sm-3">
								<div class="header-content"><a href="">科研成果</a></div>
							</div>
							<div class="col-xs-4 col-sm-3">
								<div class="header-content"><a href="">科研成果</a></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

<script>
	var vm = new Vue({
		el: '#vue_det',
		data: {
			status_type: 1,
		},
		mounted: function() {
		},
		methods: {
			
		}
	})
</script>